<template>
  <div class="father">
      <div class="return">
        <el-button type="infor" title="上一级页面" @click="returnFormModel"><i class="el-icon-back">返回</i></el-button>
      </div>
      <div class="content">
          <p v-html="dataSvg">{{dataSvg}}</p>
      </div>
      <div>
        <el-table
          :data="initHistoricVariableInstanceList"
          size="small"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column
                        label="实例编号"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processInstanceId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="变量名称"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.variableName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="变量类型"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.variableTypeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="变量赋值"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.value }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="变量版本"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.revisionNext }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime|dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
              <el-pagination
                      background
                      @current-change="currentChange"
                      @size-change="sizeChange"
                      layout="sizes, prev, pager, next, jumper, ->, total, slot"
                      :total="total">
              </el-pagination>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"HistoricVariableInstance",
    data(){
        return{
            dataSvg:'',
            initHistoricVariableInstanceList:[],
            loading:false,
            total:0,
            pageNum:1,
            pageSize:10
        }
    },
    mounted(){
        this.initViewProcess();
        this.initistoricVariableInstance();
    },
    methods:{
        initViewProcess(){
             this.getRequest("/activity/ActRuExecution/query/HighLightedProcessDiagramByProcessInstanceId/"+this.$route.query.processInstanceId).then(resp => {
                if (resp) {
                    this.dataSvg = resp;
                }
            });
        },
        initistoricVariableInstance(){
          this.loading = true;
          this.getRequest("/activity/ActHistoricalInstance/query/HistoricDetailByProcessInstanceId/"+this.$route.query.processInstanceId+"?"+this.pageNum+"&"+this.pageSize).then(resp => {
              this.loading = false;
              if (resp) {
                  this.initHistoricVariableInstanceList = resp.data.list;
                  this.total = resp.data.total;
              }
          });
        },
        returnFormModel(){
            this.$router.push('workflowActHistoricalInstance');
        },
        // 分页
        sizeChange(currentSize) {
          this.pageSize = currentSize;
          this.initistoricVariableInstance();
        },
        currentChange(currentPage) {
          this.pageNum = currentPage;
          this.initistoricVariableInstance();
        }
    }
}
</script>

<style scoped>
  .content{
    position: relative;
  }
  .return{
    position: absolute;
    bottom: 100;
    right: 10px;
  }
</style>>
